import React from "react";
import Home from "../views/home";
import Car from "../views/car";
import Classify from "../views/classify";
import My from "../views/my";
import HomeC1 from "../views/homeC1";
import HomeC2 from "../views/homeC2";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

export const routes = [
  {
    path: "/home",
    element: <Home></Home>,
    children: [
      {
        path: "/home/c1",
        element: <HomeC1></HomeC1>,
      },
      {
        path: "/home/c2",
        element: <HomeC2></HomeC2>,
      },
    ],
  },
  {
    path: "/classify",
    element: <Classify></Classify>,
  },
  {
    path: "/car",
    element: <Car></Car>,
  },
  {
    path: "/my",
    element: <My></My>,
  },
  {
    path: "/",
    element: <Navigate to="/home"></Navigate>,
  },
];
// 自定义渲染
const renderRouterView = (routes) => {
  return routes.map((v, i) => {
    return (
      <Route key={i} path={v.path} element={v.element}>
        {/* 递归渲染 */}
        {v.children && renderRouterView(v.children)}
      </Route>
    );
  });
};
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>{renderRouterView(routes)}</Routes>
    </BrowserRouter>
  );
};

export default Router;
